	<!-- 导航开始 -->
	<nav class="bg-white z-50 dark:bg-zinc-900 fixed w-full top-0 start-0" id="nav-box">
		<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto max-xl:px-0">
			<!-- 移动端下级菜单开始 -->
			<button data-collapse-toggle="mega-menu-full" id="toggle-btn" type="button"
				class="ml-4 inline-flex text-gray-800 dark:text-white items-center py-4 justify-center text-sm rounded-lg xl:hidden"
				aria-controls="navbar-sticky" aria-expanded="false">
				<span class="sr-only">Open main menu</span>
				<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
					viewBox="0 0 17 14">
					<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
						d="M1 1h15M1 7h15M1 13h15"></path>
				</svg>
			</button>
			<!-- 移动端下级菜单结束 -->
			<!-- logo开始 -->
			<a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
				<img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
				<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
			</a>

			<!-- logo结束 -->

			<!-- 工具栏开始 -->
			<div class="flex xl:order-2 py-4 space-x-3 xl:space-x-0 rtl:space-x-reverse">
				<!-- 用户按钮开始 -->
				<button type="button" class="text-white font-medium rounded-lg text-sm text-center">
					<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true"
						xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
						<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
							d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 0a8.949 8.949 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.948 8.948 0 0 0 12 21Zm3-11a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z">
						</path>
					</svg></button>
				<!-- 用户按钮 -->

				<!-- 移动端侧边按钮开始 -->
				<button type="button" id="nav-left-btn"
					class="xl:hidden font-medium rounded-lg text-sm text-center pr-4">
					<svg class="w-7 h-7 text-gray-800 dark:text-white" aria-hidden="true"
						xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
						viewBox="0 0 24 24">
						<path fill-rule="evenodd"
							d="M5 6a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm0 12a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm3.85-9.76A1 1 0 0 1 10.5 9v6a1 1 0 0 1-1.65.76l-3.5-3a1 1 0 0 1 0-1.52l3.5-3ZM12 10a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Z"
							clip-rule="evenodd"></path>
					</svg>
				</button>
				<!-- 移动端侧边按钮结束 -->
			</div>
			<!-- 工具栏结束 -->

			<!-- 菜单开始 -->
			<div id="mega-menu-full"
				class="items-center justify-between font-medium hidden w-full xl:flex xl:w-auto xl:order-1">
				<ul th:with="menu=${@columnTag.getColumnTreeById(43)}"
					class="flex max-xl:h-screen flex-col p-4 xl:p-0 max-xl:mt-0 rounded-lg xl:space-x-8 rtl:space-x-reverse xl:flex-row xl:mt-0 xl:border-0 dark:border-gray-700">
					<li class="py-4 max-xl:py-0">
						<a href="#"
							class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:p-0 dark:text-white dark:hover:bg-gray-700 xl:dark:hover:bg-transparent dark:border-gray-700"
							aria-current="page">首页</a>
					</li>
					<li class="menu-dropdown group py-4 max-xl:py-0" data-toggle="mega-menu-full-dropdown-1">
						<button
							class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded xl:w-auto hover:bg-gray-100 xl:hover:bg-transparent xl:border-0 xl:hover:text-blue-600 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700">Company
							<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
								fill="none" viewBox="0 0 10 6">
								<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
									stroke-width="2" d="m1 1 4 4 4-4"></path>
							</svg></button>
						<div id="mega-menu-full-dropdown-1"
							class="mega-menu-full-dropdown xl:group-hover:block mt-4 max-xl:mt-0 absolute left-0 w-screen rounded-lg bg-white dark:bg-gray-800 max-xl:min-h-screen max-xl:fixed max-xl:top-16 shadow-sm hidden">
							<div
								class="grid max-w-screen-xl mx-auto rounded-lg dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white sm:grid-cols-2 max-xl:mx-4">
								<ul>
									<li class="xl:hidden">
										<a href="#" id="mega-menu-full-dropdown-1-close"
											class="close-dropdown-btn block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Online Stores</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools 测试专用</span>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Segmentation</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Marketing CRM</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
								</ul>
								<ul>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Online Stores</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Segmentation</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Marketing CRM</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li class="menu-dropdown group py-4 max-xl:py-0" data-toggle="mega-menu-full-dropdown-2">
						<button
							class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded xl:w-auto hover:bg-gray-100 xl:hover:bg-transparent xl:border-0 xl:hover:text-blue-600 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700">Company
							<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
								fill="none" viewBox="0 0 10 6">
								<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
									stroke-width="2" d="m1 1 4 4 4-4"></path>
							</svg></button>

						<div id="mega-menu-full-dropdown-2"
							class="mega-menu-full-dropdown xl:group-hover:block mt-4 max-xl:mt-0 absolute left-0 w-screen rounded-lg shadow-lg bg-white dark:bg-gray-800 max-xl:min-h-screen max-xl:fixed max-xl:top-16 hidden">
							<div
								class="grid max-w-screen-xl mx-auto dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white sm:grid-cols-2 max-xl:mx-4">
								<ul>
									<li class="xl:hidden pt-4 px-2" id="mega-menu-full-dropdown-2-close">
										<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
											stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
											<path stroke-linecap="round" stroke-linejoin="round"
												d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"></path>
										</svg>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Segmentation不宜天涯</div>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Marketing CRM</div>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Marketing CRM</div>
										</a>
									</li>
								</ul>

								<ul>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Online Stores</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Segmentation</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
									<li>
										<a href="#"
											class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
											<div class="font-semibold">Marketing CRM</div>
											<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
												third-party tools that you're already using.</span>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</li>
					<li class="menu-dropdown group py-4 max-xl:py-0" data-toggle="mega-menu-full-dropdown-3">
						<button
							class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded xl:w-auto hover:bg-gray-100 xl:hover:bg-transparent xl:border-0 xl:hover:text-blue-600 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700">Comdddd
							<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
								fill="none" viewBox="0 0 10 6">
								<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
									stroke-width="2" d="m1 1 4 4 4-4"></path>
							</svg></button>

						<div id="mega-menu-full-dropdown-3"
							class="mega-menu-full-dropdown xl:group-hover:block mt-4 max-xl:mt-0 absolute left-0 w-screen rounded-lg shadow-lg bg-white dark:bg-gray-800 max-xl:min-h-screen max-xl:fixed max-xl:top-16 hidden">
							<div class="container max-xl:mx-4">
								<div
									class="grid grid-cols-2 mt-4 gap-x-4 md:grid-flow-row-dense md:text-left max-xl:grid-cols-1 max-xl:text-left">
									<div class="flex flex-col max-xl:flex-row items-end max-xl:items-left">
										<div>
											<h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
												Password requirements:
											</h2>
											<ul class="text-gray-500 list-none list-inside dark:text-gray-400">
												<li>At least 10 characters (and up to 100 characters)</li>
												<li>At least one lowercase character</li>
												<li>
													Inclusion of at least one special character, e.g., ! @ #
													?
												</li>
											</ul>
										</div>
									</div>
									<div class="flex flex-wrap justify-left">
										<!-- 右侧横向排列的 div 元素 -->
										<div class="w-full">
											<h2
												class="mb-4 max-xl:mt-4 text-lg font-semibold text-gray-900 dark:text-white">
												Password requirements:
											</h2>
										</div>
										<div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
										<div class="w-48 h-40 mb-4 bg-zinc-600">Div 1</div>
										<div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
										<div class="w-48 h-40 mb-4 bg-zinc-600">Div 1</div>
										<div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
										<div class="w-48 h-40 mb-4 bg-zinc-600">Div 1</div>
										<div class="w-48 h-40 mb-4 bg-fuchsia-900">Div 2</div>
										<!-- 更多 div 元素... -->
									</div>
								</div>
							</div>
						</div>
					</li>

					<li class="menu-dropdown group py-4 max-xl:py-0" data-toggle="mega-menu-full-dropdown-4" th:data-toggle="${'mega-menu-full-dropdown-'+menu.columnId}"
						th:each="column: ${menu.childList}">
						<div th:if="${!#lists.isEmpty(column.childList)}">
							<button
								class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded xl:w-auto hover:bg-gray-100 xl:hover:bg-transparent xl:border-0 xl:hover:text-blue-600 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700"><span
									th:text="${column.columnName}">下拉</span>
								<svg class="w-2.5 h-2.5 ms-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
									fill="none" viewBox="0 0 10 6">
									<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
										stroke-width="2" d="m1 1 4 4 4-4"></path>
								</svg></button>
							<div id="mega-menu-full-dropdown-4" th:id="'mega-menu-full-dropdown-' + ${menu.columnId}"
								class="mega-menu-full-dropdown xl:group-hover:block mt-4 pb-4 max-xl:mt-0 absolute left-0 w-screen rounded-lg bg-white dark:bg-gray-800 max-xl:min-h-screen max-xl:fixed max-xl:top-16 shadow-sm hidden">
								<div
									class="grid max-w-screen-xl mx-auto rounded-lg dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white  max-xl:mx-4">
									<ul class="grid grid-cols-2 max-sm:grid-cols-1 gap-4">
										<li class="max-xl:block hidden pt-4 px-2" id="mega-menu-full-dropdown-4-close" th:id="'mega-menu-full-dropdown-' + ${menu.columnId}+'-close'">
											<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
												stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
												<path stroke-linecap="round" stroke-linejoin="round"
													d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"></path>
											</svg>
										</li>
										<li th:each="twoColumn : ${column.childList}">
											<a 
												th:href="${#strings.isEmpty(twoColumn.columnUrl)?'javascript:void(0);': niceConfig['oly.web.domain']+twoColumn.columnUrl}"
												class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
												<div class="font-semibold" th:text="${twoColumn.columnName}">
													Segmentation
												</div>
												<span class="text-sm text-gray-500 dark:text-gray-400"
													th:text="${twoColumn.remark}">Connect with third-party tools that
													you're already
													using.</span>
											</a>
										</li>
										<li>
											<a href="#"
												class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
												<div class="font-semibold">Marketing CRM</div>
												<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
													third-party tools that you're already
													using.</span>
											</a>
										</li>
                    <li>
											<a href="#"
												class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
												<div class="font-semibold">Marketing CRM</div>
												<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
													third-party tools that you're already
													using.</span>
											</a>
										</li>
                    <li>
											<a href="#"
												class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
												<div class="font-semibold">Marketing CRM</div>
												<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
													third-party tools that you're already
													using.</span>
											</a>
										</li>
                    <li>
											<a href="#"
												class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
												<div class="font-semibold">Marketing CRM</div>
												<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
													third-party tools that you're already
													using.</span>
											</a>
										</li>
                    <li>
											<a href="#"
												class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
												<div class="font-semibold">Marketing CRM</div>
												<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
													third-party tools that you're already
													using.</span>
											</a>
										</li>
                    <li>
											<a href="#"
												class="block pt-4 px-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
												<div class="font-semibold">Marketing CRM</div>
												<span class="text-sm text-gray-500 dark:text-gray-400">Connect with
													third-party tools that you're already
													using.</span>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<a href="#" th:if="${#lists.isEmpty(column.childList)}"
							th:href="${#strings.isEmpty(column.columnUrl)?'javascript:void(0);': niceConfig['oly.web.domain']+column.columnUrl}"
							class="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:p-0 dark:text-white dark:hover:bg-gray-700 xl:dark:hover:bg-transparent dark:border-gray-700"
							aria-current="page" th:text="${column.columnName}">首页</a>
					</li>

					<li class="py-4 max-xl:py-0">
						<a href="#"
							class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:hover:text-blue-700 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700">Marketplace</a>
					</li>
					<li class="py-4 max-xl:py-0">
						<a href="#"
							class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:hover:text-blue-700 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700">Resources</a>
					</li>
					<li class="py-4 max-xl:py-0">
						<a href="#"
							class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:hover:text-blue-700 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
					</li>
				</ul>
			</div>
			<!-- 菜单结束 -->
		</div>
	</nav>
	<!-- 导航结束 -->

<script>
  import { Collapse } from "flowbite";

  // 获取菜单节点下所有的下拉条
  let navBox = document.querySelector("#nav-box");
  if (navBox) {
    let dropdowns = navBox.querySelectorAll(".menu-dropdown");
    for (let i = 0; i < dropdowns.length; i++) {
      let dropdownTrag = dropdowns[i].getAttribute("data-toggle");

      //触摸点击显示下拉菜单
      dropdowns[i].addEventListener(
        "touchstart",
        function (event) {
          document
            .querySelector("#" + dropdownTrag)
            ?.classList.remove("hidden");
        },
        false
      );
      //点击关闭按钮关闭下拉菜单
      document
        .querySelector("#" + dropdownTrag + "-close")
        ?.addEventListener("touchstart", function (event) {
          setTimeout(function () {
            document.querySelector("#" + dropdownTrag)?.classList.add("hidden");
          }, 100);
        });
    }
  }

  let menuBtn = navBox!.querySelector("#toggle-btn");
  // 移动端导航button是否点击状态
  var menuBtnStatus = false;
  menuBtn!.addEventListener("click", function () {
    menuBtnStatus = !menuBtnStatus;
    if (!menuBtnStatus) {
      const ds = document.querySelectorAll(".mega-menu-full-dropdown");
      ds.forEach(function (item) {
        item.classList.add("hidden");
      });
    }
  });

  const y = document.getElementById("right-box-fixed");
  const nl = document.querySelector("#nav-left-btn");
  nl!.addEventListener("click", function () {
    if (y) {
      if (!y.classList.contains("max-xl:hidden")) {
        y.classList.add("max-xl:hidden");
        y.style.top = "14px";
      } else {
        y.classList.remove("max-xl:hidden");
        y.style.top = "60px";
      }
    }
  });
</script>
